<template>
	<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
		<view class="title">回退至结算</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="uv-form-box">
				<uv-form labelPosition="top" :model="formData" :rules="rules" ref="form" labelWidth="auto">
					<uv-form-item label="回退理由" prop="content" required>
						<uv-textarea height="100" v-model="formData.content" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
				</uv-form>
			</view>
		</scroll-view>
		<view class="btn-box">
			<uv-button @click="closeFunc" text="取 消" customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
				customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"></uv-button>
			<uv-button @click="formSubmit" type="primary" text="提 交"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
				customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"></uv-button>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		computed,
		watch,
		onMounted,
		getCurrentInstance,
		ref,
		defineEmits
	} from 'vue';
	const {
		proxy: that
	} = getCurrentInstance();
	let props = defineProps({
		show: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		dataObj: {
			type: Object,
			default: () => {
				return {};
			}
		}
	});
	// 表单数据
	let formData = ref({
		radiovalue: 1,
		content: ''
	});
	// 表单规则
	let rules = ref({
		content: {
			required: true,
			message: '请输入内容',
			trigger: ['blur', 'change']
		}
	});

	onMounted(() => {
		// that.$refs.popupBox.open();
		// getCompanyList();
	});

	watch(
		() => props.show,
		(newValue, oldValue) => {
			console.log(newValue, oldValue, '值变化');
			if (props.show) {
				that.$refs.popupBox.open();
			} else {
				formData.value = {
					radiovalue: 1,
					content: ''
				};
				that.$refs.form.clearValidate();
				that.$refs.popupBox.close();
			}
		}
	);
	const emit = defineEmits(['close', 'onSuccess']);

	const closeFunc = () => {
		emit('close', false);
	};
	// 表单提交
	const formSubmit = () => {
		let data = formData.value;
		let dataObj = props.dataObj;
		console.log(data, '表单数据', dataObj);
		that.$refs.form
			.validate()
			.then((res) => {
				uni.showLoading({
					mask: true,
					title: '信息提交中...'
				});
				that.$Api
					.settlementStatementRejected({
						remark: data.content,
						project_id: props.dataObj.id,
						status: 1130
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							emit('onSuccess', true);
						}
						uni.showToast({
							title: res.code == 200 ? '操作成功' : res.message,
							icon: res.code == 200 ? 'success' : 'error'
						});
					})
					.catch((err) => {
						uni.hideLoading();
					});
			})
			.catch((errors) => {});
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.scroll-view {
		width: 100%;
		max-height: 50vh;
		background-color: #fff;

		// padding: 0 30rpx;
		// box-sizing: border-box;
		.uv-form-box {
			padding: 0 30rpx !important;
		}

		.file-box {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.file-list {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-left: 10rpx;
				padding: 10rpx;
				background-color: #f8f8f8;

				.file-name {
					font-size: 24rpx;
				}
			}

			.file-media {
				width: 150rpx;
				height: 150rpx;
				margin: 0 27rpx 22rpx 0;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.media-item {
					width: 100%;
					height: 100%;
				}

				.icon-box {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.6);
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.del-icon {
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 1;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>